<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 禁用地址源信息，解决访问B站视频封面时的权限问题 -->
  <meta name="referrer" content="no-referrer" />
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../static/css/index.css">
  <title>词云生成器</title>
</head>
<body>
  <div id="app">
    <div class="title">BiliBili词云生成器</div>
    <div class="form" >
      <el-input
        placeholder="请输入视频av号(不含av)或bv号(BV开头)"
        v-model="input"
        clearable
        maxlength=20>
      </el-input>
      <el-alert
        v-show="error"
        class="alert"
        title="输入格式有误，请重新输入"
        type="error"
        :closable="false">
      </el-alert>
      <el-button @click="start()" :disabled="!canStart || error" type="primary" class="button" >开始生成 !</el-button>
    </div>
    <el-row class="row" :gutter="12" type="flex" justify="center">
      <el-col class="col" :xs="20" :lg="12" :md="13" :sm="17">
        <el-card v-for="(item,index) in wordcloud" :key="index" class="card" shadow="hover">
          <p>${item.av}</p>
          <p class="link"><el-link target="_blank" :href="item.cover" type="primary">查看视频封面</el-link></p>
          <el-image
            :src="item.url"
            fit="contain">
          </el-image>
        </el-card>
        <div class="load" v-show="taskCount>0">
          <div v-loading="true" class="loading"></div>
          <p>还剩${taskCount}个任务，已失败${failCount}个</p>
        </div>
      </el-col>
    </el-row>

    <el-backtop></el-backtop>
  </div>
</body>
<script>
    new Vue({
      delimiters: ['${', '}'],
      el: '#app',
      data: function() {
        return {
           input: '',       // 输入的av号
           error: false,    // 是否输入错误
           canStart: false, // 是否可以提交
           wordcloud:[],    // 返回的词云列表
           taskCount: 0,    // 正在进行的任务数量
           failCount: 0     // 失败的任务数量
        }
      },
      methods: {
        // 开始生成词云
        start() {
          this.disableBtn();  // 禁用按钮 1s 后启用按钮 (防止重复提交)
          this.$notify({
            title: '成功',
            message: '已提交生成任务，请稍等片刻',
            type: 'success'
          });
          this.taskCount = this.taskCount + 1;  // 任务数 +1
          var av = this.input;
          // 请求生成词云的API 
          var _this = this;
          axios.post('/wordcloud/' + av)
          .then(function (response) {
            var data = response.data;
            if(data.code == 0){
              _this.$notify.error({
                title: '失败',
                message: '无法获取 '+av.substring(0,2) == 'BV' ? av: 'av'+av+' 的视频信息，请检查av/bv号是否输入错误'
              });
            }else if(data.url == 'too small'){
              _this.$notify.error({
                title: '失败',
                message: av.substring(0,2) == 'BV' ? av: 'av'+av+' 封面图片太小'
              });
            }else if(data.url == 'no word'){
              _this.$notify.error({
                title: '失败',
                message: av.substring(0,2) == 'BV' ? av: 'av'+av+' 没有任何弹幕'
              });
            }else{
              _this.putImage(av,data);  // 把返回的词云加入列表
              _this.$notify.success({
                title: '成功',
                message: '词云已成功生成'
              });
            }
            _this.taskCount = _this.taskCount - 1;  // 任务数 -1
          })
          .catch(function (error) {
            _this.taskCount = _this.taskCount - 1;  // 任务数 -1
            _this.failCount = _this.failCount + 1;  // 错误数 +1
            // console.log(error);
            _this.$notify.error({
              title: '错误',
              message: error
            });
          });
        },
        
        // 把词云加入列表
        putImage(av,data) {
          var data = {
            av: av.substring(0,2) == 'BV' ? av: 'av'+av,      // av号
            cover: data.cover,  // 封面
            url: data.url       // 词云图片
          }
          this.wordcloud.push(data);
        },

        // 禁用按钮并1s后恢复
        disableBtn() {
          if(!this.canStart){
            return;
          }
          this.canStart = false;  // 按钮禁用
          var _this = this;
          // 1s 后解除禁用
          var timer = setTimeout(function (){
            _this.canStart = true;  
          }, 1000);
        },

        // 发送网页通知
        notify(title,msg) {
          const h = this.$createElement;
          this.$notify({
            title: title,
            message: h('i', { style: 'color: #606266'}, msg)
          });
        },
      },

      // 监听输入框变化
      watch: {
        input(val,oldval) {
          // var reg = new RegExp("^[0-9]*$");
          // this.error = !reg.test(val);
          this.canStart = this.input != '';
        }
      }
    })
</script>
</html>